<template>
  <div class="clientType">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              placeholder="请输入模型名称"
              v-model="searchForm.searchInput"
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="searchForm.searchSelectValue"
              placeholder="请选择模型类型"
              @change="selectChange"
            >
              <el-option
                v-for="item in projectTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="searchClick">搜索</el-button>
      </div>
    </div>
    <global-card>
      <template #leftTitle>
        <el-button type="primary" icon="el-icon-plus" @click="newQuipmentClick"
          >新建可配置模型</el-button
        >
        <el-button type="success" icon="el-icon-refresh" @click="refresh"
          >刷新</el-button
        >
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
          ref="tableRef"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column prop="modelName" label="模型名称" align="center" />

          <el-table-column prop="modelType" label="模型类型" align="center" />
          <el-table-column
            prop="modelVersion"
            label="模型版本号"
            align="center"
          />
          <el-table-column prop="modelDes" label="模型描述" align="center" />

          <el-table-column label="创建时间" align="center" prop="createTime">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="300" align="center">
            <template #default="{ row }">
              <el-button type="primary" size="mini" @click="handlerDetails(row)"
                >配置参数</el-button
              >
              <el-button type="warning" size="mini" @click="handlerEdit(row)"
                >编辑</el-button
              >
              <el-button type="danger" size="mini" @click="handlerDelete(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>

    <yc-dialog
      ref="ycDialog"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
    >
      <template #content>
        <div class="dialog-content">
          <el-form
            :model="newQuipmentModel"
            :rules="rules"
            ref="loginFormRef"
            label-width="100px"
          >
            <el-form-item label="模型名称" prop="modelName">
              <el-input
                v-model="newQuipmentModel.modelName"
                :disabled="detailsDisabled"
              />
            </el-form-item>

            <el-form-item label="模型类型" prop="modelType">
              <el-input
                v-model="newQuipmentModel.modelType"
                :disabled="detailsDisabled"
              />
            </el-form-item>
            <el-form-item label="模型版本号" prop="modelVersion">
              <el-input
                v-model="newQuipmentModel.modelVersion"
                :disabled="detailsDisabled"
              />
            </el-form-item>

            <el-form-item label="模型描述">
              <el-input
                v-model="newQuipmentModel.modelDes"
                :disabled="detailsDisabled"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false"
          >取消
        </el-button>
      </template>
    </yc-dialog>
    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
import {
  queryPageDeviceModel,
  insertDeviceModel,
  deleteDeviceModel,
  update
} from "@/api/modelManagement/equipment"
import ycDialog from "@/components/pageDialog"
export default {
  data() {
    return {
      tableData: [],
      formatDate: "yyyy-MM-dd",
      count: 0,
      projectTypeOptions: [
        {
          label: "私人客户",
          value: "私人客户"
        },
        {
          label: "高能耗客户",
          value: "高能耗客户"
        },
        {
          label: "学校客户",
          value: "学校客户"
        }
      ],
      searchOptions: [
        {
          label: "类型一",
          value: "1"
        },
        {
          label: "类型二",
          value: "2"
        },
        {
          label: "类型三",
          value: "3"
        }
      ],
      searchForm: {
        searchInput: "",
        searchSelectValue: ""
      },
      newQuipmentModel: {
        modelName: "",
        modelType: "",
        modelVersion: "",
        modelDes: "",
        id: "",
        multiple: ""
      },
      detailsDisabled: false,
      isGlobalMessageShow: false,

      dialogCenterTitle: "",
      dialogTitle: "",
      message: "",
      pageIndex: 1,
      pageSize: 20,
      loading: false,
      rules: {
        modelName: [
          { required: true, message: "请输入模型名称", trigger: "blur" }
        ],
        modelType: [
          { required: true, message: "请输入模型类型", trigger: "blur" }
        ],
        modelVersion: [
          { required: true, message: "请输入模型版本号", trigger: "blur" }
        ]
      }
    }
  },
  components: {
    ycDialog
  },
  created() {
    this.getPageProject()
  },
  methods: {
    async getPageProject(pageIndex = 1, pageSize = 20) {
      this.loading = true
      // projectType
      const { searchInput, searchSelectValue } = this.searchForm
      const { object } = await queryPageDeviceModel({
        pageIndex,
        pageSize,
        modelName: searchInput,
        modelType: searchSelectValue
      })
      console.log(object)
      this.count = object.count
      this.tableData = object.data
      this.loading = false
    },

    /**
     * 详情按钮
     */
    handlerDetails(row) {
      const { modelName, modelType, modelVersion, modelDes, modelCode } = row
      this.$router.push({
        path: "/modelManagement/applicationScenariosDetail",
        query: { modelName, modelType, modelVersion, modelDes, modelCode }
      })
    },
    async searchClick() {
      this.getPageProject(1, 20)
    },
    async dialogSave() {
      this.$refs.loginFormRef.validate(async (v) => {
        if (v) {
          this.$refs.ycDialog.dialogVisible = false
          if (this.detailsDisabled) {
            // 详情
            this.$refs.ycDialog.dialogVisible = false
          } else if (
            this.newQuipmentModel.modelName &&
            this.newQuipmentModel.id
          ) {
            //  编辑
            const { status } = await update({ ...this.newQuipmentModel })

            if (status == 200) {
              this.isGlobalMessageShow = true
              this.message = "success"
            } else {
              this.message = "error"
            }
          } else {
            this.insertDeviceModelFun()
            this.getPageProject()
          }
        }
      })
    },
    receive() {
      this.isGlobalMessageShow = false
    },
    dateChange(dateItem) {
      console.log(dateItem, this.searchForm)
    },

    selectChange() {
      console.log("aaa")
    },
    pagination(pageItem) {
      this.getPageProject(pageItem.page, pageItem.limit)
    },
    refresh() {
      Object.keys(this.searchForm).forEach((item) => {
        this.searchForm[item] = ""
      })
      this.getPageProject()
    },
    handlerEdit(row) {
      this.$refs.ycDialog.dialogVisible = true
      this.$refs.loginFormRef?.clearValidate()
      this.detailsDisabled = false
      this.dialogCenterTitle = "设备基本信息"
      this.dialogTitle = "设备详情"
      this.newQuipmentModel.modelName = row.modelName
      this.newQuipmentModel.modelType = row.modelType
      this.newQuipmentModel.modelVersion = row.modelVersion
      this.newQuipmentModel.modelDes = row.modelDes
      this.newQuipmentModel.multiple = row.multiple

      this.newQuipmentModel.id = row.id
      console.log(row)
    },
    handlerDelete({ id }) {
      this.$confirm("确定删除此模型吗", "删除操作", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
        center: true
      }).then(async () => {
        const { status } = await deleteDeviceModel({ id })
        if (status == 200) {
          console.log(id)
          this.getPageProject()
          this.isGlobalMessageShow = true
          this.message = "success"
        } else {
          this.message = "error"
        }
      })
    },
    newQuipmentClick() {
      this.dialogCenterTitle = "新建可配置模型"
      this.dialogTitle = "设备详情"
      this.$refs.ycDialog.dialogVisible = true
      this.$refs.loginFormRef?.clearValidate()
      this.newQuipmentModel = {}
      this.detailsDisabled = false
    },
    async insertDeviceModelFun() {
      const { status } = await insertDeviceModel({ ...this.newQuipmentModel })
      if (status == "200") {
        this.isGlobalMessageShow = true
        this.message = "success"
      } else {
        this.isGlobalMessageShow = true
        this.message = "error"
      }
    },
    async updateDeviceModelFun() {}
  }
}
</script>
<style lang="scss" scoped>
.clientType {
  .title-container {
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;

    .left-box {
      display: flex;

      .formClass {
        display: flex;
        margin-right: 20px;
        .el-form-item {
          margin-top: 20px;
          margin-bottom: 0;
          .el-input {
            width: 216px;
          }
          .el-select {
            width: 171px;
            margin-left: 10px;
          }
          .el-date-editor {
            width: 336px;
            margin-left: 10px;
          }
        }
      }
      .el-button {
        // width: 42px;
        height: 36px;
        margin-top: 20px;
      }
    }
  }
}
</style>
